<template>
    <div class="step-content template-from" v-show="stepShow">
        <div>
            <h4 v-if="!isSetp">处理工序</h4>
            <LocalGrid module="processes" :data="data.processes" :model="processModel"></LocalGrid>
            <div class="item-form" v-if="false">
                <Row v-for="(process,index) in data.processes" :key="index">
                    <div class="remove" @click="removeProcessData(index)">
                        <Icon v-if="index>0" type="close"></Icon>
                    </div>
                    <Col :span="2">
                    <label>提取实体</label>
                    </Col>
                    <Col :span="22">
                    <SelectControl :value="process.entity_code" @on-change="processEntityChange({index,value:$event})" :data="entityData" ref="entity" placeholder="请选择实体" optionCode="TABLE_NAME" optionKey="TABLE_NAME">
                    </SelectControl>
                    </Col>
                    <Col :span="2">
                    <label>提取表达式</label>
                    </Col>
                    <Col :span="22">
                    <CodeEditor lang="sql" @input="updateProcessData({code:'extract_expression',value:$event,index})" :value="process.extract_expression"></CodeEditor>
                    </Col>
                    <hr v-if="index<data.processes.length-1">
                </Row>
                <Button @click="addProcessData" type="ghost" icon="plus" long>添加工序</Button>
            </div>
        </div>
    </div>
</template>

<script>
import Step from './step'
import CodeEditor from '@/element/codeEditor'
import SelectControl from '@/element/select'
import LocalGrid from '@/components/localGridPanel'
import processModel from '../processModel'
export default {
    extends: Step,
    props: {
    },
    data() {
        return {

        }
    },
    computed: {
        processModel() {
            return processModel(this.dsCode)
        }
    },
    methods: {
    },
    components: {
        SelectControl,
        CodeEditor,
        LocalGrid
    }
}
</script>
<style lang="less" scoped>
.CodeMirror {
    margin-right: -8px;
}

.remove {
    color: #ed3f14;
    position: absolute;
    right: 0px;
    top: -15px;
    cursor: pointer;
}

hr {
    border-color: #e9eaec;
    border-style: solid;
    margin-bottom: 20px;
}
</style>
